<template>
  <div class="Home">
      <div class="Home-header">
    <Tabs value="name1">
        <TabPane class="Border-Tab" label="全部订单(1000)" name="name1"></TabPane>
        <TabPane class="Border-Tab" label="代付款(1000)" name="name2"></TabPane>
        <TabPane class="Border-Tab" label="代发货(1000)" name="name3"></TabPane>
        <TabPane class="Border-Tab" label="已发货(1000)" name="name4"></TabPane>
        <TabPane class="Border-Tab" label="已完成(1000)" name="name5"></TabPane>
        <TabPane class="Border-Tab" label="已关闭(1000)" name="name6"></TabPane>
    </Tabs>
      </div>
      <div class="ipt">
          <div class="iptTop">
              <div class="Ipifilter"><Icon type="ios-search-outline" /><input type="text" placeholder="筛选查询" /></div>
              <div></div>
              <div class="boxfilter">
                  <p>
                      <select name="" id="">
                          <option value="收起筛选">收起筛选</option>
                          <option value="北京">北京</option>
                          <option value="上海">上海</option>
                          <option value="广东">上海</option>
                      </select>
                  </p>
                  <p><button>查询结果</button></p>
                  <p><button>高级检索</button></p>
              </div>
          </div>
          <div class="iptBottom">
              <div class="inputbox">
                  <p>输入搜索:</p>
                  <p><input type="text"></p>
              </div>
              <div class="inputbox">
                  <p>收货人:</p>
                  <p><input type="text"></p>
              </div>
              <div class="inputbox">
                  <p>提交时间:</p>
                  <p><input class="tileinput" type="time"></p>
              </div>
          </div>
      </div>
      <div class="fromBox">
          <div class="fromheader">
              <p>订单单号</p>
              <p>提交时间</p>
              <p>用户账号</p>
              <p>订单金额</p>
              <p>支付方式</p>
              <p>订单来源</p>
              <p>订单转态</p>
              <p>操作</p>
          </div>
          <div class="listboxst">
              <dl v-for="(item,index) in HomeArray" :key="index">
                  <dd>{{item.id}}</dd>
                  <dd>2021-07-6&nbsp;{{item.time}}</dd>
                  <dd>{{item.id}}</dd>
                  <dd>￥{{item.price}}.00</dd>
                  <dd>未支付</dd>
                  <dd>{{item.order}}</dd>
                  <dd>{{item.polling}}</dd>
                  <dd class="dingdan-dd">
                      <p><button class="dingdan">查看订单</button></p>
                      <p><button class="dingdan">关闭订单</button></p>
                  </dd>
              </dl>
          </div>
      </div>

  </div>
</template>

<script>
import axios from 'axios';
export default {
   data() {
       return {
           activeIndex:0,
           HomeArray:[],
           HomeHeader:[
               {
                   name:""
               }
           ]
       }
   },
   created() {
       axios.post("/api/getList").then(res => {
           console.log(res)
           this.HomeArray = res.data.list
       })
   },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
.fromheader{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc;
}
.fromheader>p{
    width: 170px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    border: 1px solid #cccccc;
}
.Home-header{
    width: 100%;
    height: 40px;
}
.dingdan-dd{
    display: flex;
    justify-content: space-around;
}
.dingdan-dd>p>button{
    outline: none;
    color: seagreen;
}
.ipt{
    width: 100%;
    height: 100px;
    background: #f2f2f2;
}
.iptBottom{
    display:flex;
    align-items: center;
    justify-content: space-around;
}
.listboxst>dl{
    width: 100%;
    height: 40px;
    display: flex;
    border-bottom: 1px solid #cccccc;
}
.listboxst>dl>dd{
     width: 170px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     border-right: 1px solid #cccccc;
}
.inputbox{
    display:flex;
    align-items: center;
}
.iptTop{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}
.tileinput{
    width: 180px;
}
.boxfilter{
    display: flex;
    align-items: center;
}
.Ipifilter{
    display: flex;
    align-items: center;
}
.Ipifilter>input{
    width: 70%;
    height: 50px;
    border: none;
    outline: none;
}
</style>